<template>
    <div class='btn'>
        <button :style="{background:backColor}" @click="btnClick">{{msg}}</button>
    </div>
</template>

<script>
export default {
    props:{
      msg: String,
      type: String,
    },
    watch:{
      type(){
        if (this.type == 'success'){
          this.backColor = 'green'
        }
      }
    },
    data() {
        return {
           backColor: "#fff"
        };
    },
    mounted() {},
    methods: {
      btnClick(){
          //第一个参数 事件名称 （自定义事件名称）第二个参数 要传入过去的值
        this.$emit('el-click','我是子组件传入过来的');
      }
    },
    components:{}
};
</script>

<style lang='scss' scoped>
   .btn{
     button{
        width: 80px;
        line-height: 40px;
        border: none;
        border-radius: 5px;
     }
   }
</style>
